<template>
  <!-- 新增素材 -->
  <a-modal  :visible="visible" title="新增素材" @ok="materialConfirm" cancelText="关闭" class="pop-table"
           :closable="false" @cancel="handleCancel">
    <a-form style="margin:30px 0">
      <!-- <a-form-item v-show="queryParam.materialType == 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择分组">
        <a-select v-model="requestParam.groupId" placeholder="选择分组" default-value="">
          <a-select-option v-for="(item,index) of groupList" :key="index" :value="item.groupId">{{item.groupName}}</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item v-show="queryParam.materialType == 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="图片上传">
        <j-image-upload accept="image/*" ref="imageUp" v-model="requestParam.materialUrl" @change="imgChange"
                      @beforeUpload="beforeUpload" :beforeflag="true"></j-image-upload>
      </a-form-item>
      <a-form-item v-show="queryParam.materialType == 2" :labelCol="labelCol" :wrapperCol="wrapperCol" label="视频上传">
        <j-upload accept="video/*" v-model="requestParam.materialUrl" @change="fileChange"></j-upload>
      </a-form-item>
      <a-form-item v-show="queryParam.materialType == 3" :labelCol="labelCol" :wrapperCol="wrapperCol" label="音频上传">
        <j-upload accept="audio/*" v-model="requestParam.materialUrl" @change="fileChange"></j-upload>
      </a-form-item>
      <a-form-item v-show="queryParam.materialType == 2" :labelCol="labelCol" :wrapperCol="wrapperCol" label="输入素材封面">
        <j-image-upload ref="imageUp" @change="coverChange"></j-image-upload>
      </a-form-item>
      <a-form-item v-show="queryParam.materialType != 1" :labelCol="labelCol" :wrapperCol="wrapperCol" label="输入素材标题">
        <a-input placeholder="输入素材标题" v-model="requestParam.remark" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="输入标签">
        <a-input placeholder="输入标签" v-model="requestParam.keyword" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属分组">
        <a-select v-model="requestParam.groupId" placeholder="请选择标签" :default-value="1" class="select-box">

          <a-select-option v-for="(item,index) of groupList" :key="index" :value="item.groupId">{{item.groupName}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script>
  import { httpAction,getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"

  export default {
    name: "CrdMaterialInfoModal",
    data () {
      return {
        title:"操作",
        visible: false,
        materialModal: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
        },
        url: {
          add: "/materia/crdMaterialInfo/add",
          edit: "/materia/crdMaterialInfo/edit",
        },
        queryParam:{
          materialType:1
        },
        requestParam:{
          materialUrl:""
        },
        groupList:[],
        cropperVisible: false,
        options: {
          img: '',
          autoCrop: true,
          autoCropWidth: 200,
          autoCropHeight: 200,
          fixedBox: false
        },
      }
    },
    created () {
      this.getGroupList()
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'remark','delFlag','materialType','keyword','groupId','groupName','materialName','materialUrl'))
		  //时间格式化
        });

      },
      getGroupList() {
        //分组信息
        getAction('materia/crdMaterialInfo/queryGroupInfo', {
          materialType: 1
        }).then(res => {
          this.groupList = res.result
        })
      },
      close () {
        this.$emit('ok');
        this.visible = false;
      },
      coverChange(path, item) {
        this.requestParam.materialCoverUrl = item.file.response.result.url
      },
      imgChange(path, item) {
        console.log("item")
        console.log(item)
        this.requestParam.materialUrl = path;
        this.requestParam.materialName = item.file.name;
      },
      fileChange(item) {
        this.requestParam.materialUrl = item.file.response.result.url
      },
      beforeUpload(file, resolve) {
        console.log(file)
        this.options.img = window.URL.createObjectURL(file)
        this.cropperVisible = true;
        this.resolve = resolve;
      },
      handleOk () {

        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化
            
            console.log(formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel () {
        this.close()
      },
      materialConfirm() {
        this.requestParam.materialType = this.queryParam.materialType;
        this.requestParam.groupId = this.queryParam.groupId;
        // if(!this.requestParam.keyword){
        //   this.$message.warning('请输入标签');
        //   return false;
        // }
        if (!this.requestParam.groupId) {
        this.$message.warning('请选择有效分组')
        return false
      }
        if(!this.requestParam.materialUrl){
          this.$message.warning('请上传素材');
          return false;
        }
        httpAction('materia/crdMaterialInfo/add', this.requestParam, 'post').then(res => {
          this.visible = false;
          // this.getList();
          this.requestParam = {
            materialType: this.queryParam.materialType,
            groupId: '',
            materialName: '',
            materialUrl: '',
            materialCoverUrl: '',
            remark: '',
          }
          this.$emit('ok');
        })
      },
    }
  }
</script>

<style lang="less" scoped>

</style>